<#systemSituation globalInfo="${globalInfo}"/>
<!-- widget grid -->
<section>

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="jarviswidget jarviswidget-color-blueDark" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                    <h2>Redis监控 </h2>

                </header>

                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="well well-clean padding-bottom-0 padding-top-0 margin-bottom-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6" style="padding-left: 0;">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">基本信息</h3>
                                    </div>
                                    <div class="panel-body no-padding text-align-center">
                                        <table class="table table-bordered">
                                            <tr>
                                                <td width="30%">
                                                    数据库地址
                                                </td>
                                                <td width="70%" id="redisHost">
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    数据库端口
                                                </td>
                                                <td>
                                                    <span class="label label-primary" id="redisPort"></span>
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    版本
                                                </td>
                                                <td>
                                                    <span class="badge bg-color-greenLight" id="redisVersion"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    操作系统
                                                </td>
                                                <td id="redisOs">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    系统架构
                                                </td>
                                                <td>
                                                    <span class="badge bg-color-pinkDark" id="redisArch"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    配置文件路径
                                                </td>
                                                <td id="redisConfigFile">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="panel-footer text-align-right">
                                        <a id="redisRestart" href="javascript:void(0);" class="btn btn-danger"><i
                                                class="fa fa-play-circle"></i>
                                            重启</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6" style="padding-right: 0;">
                                <div class="panel panel-success">
                                    <img id="redisPng" src="${ctx}/static/img/status-error.png" class="ribbon">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            状态信息</h3>
                                    </div>
                                    <div class="panel-body no-padding text-align-center">
                                        <table class="table table-bordered">
                                            <tr>
                                                <td width="30%">
                                                    运行状态
                                                </td>
                                                <td width="70%">
                                                    <span class="badge bg-color-greenLight" id="redisStatus"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="30%">
                                                    运行时间
                                                </td>
                                                <td width="70%" id="redisUptime">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="30%">
                                                    集群状态
                                                </td>
                                                <td width="70%">
                                                    <span class="label label-info" id="redisClusterEnabled"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td valign="middle">
                                                    网络和键信息
                                                </td>
                                                <td rowspan="2" id="redisLink">
                                                    <div class="text-center">
                                                        <div style="padding-right:30px;" rel="tooltip" data-placement="top"
                                                             data-original-title="Redis服务器网络流量信息"
                                                             class="sparkline txt-color-blue display-inline net-info"
                                                             data-sparkline-type="pie"
                                                             data-sparkline-offset="90"
                                                             data-sparkline-piesize="90px">10,20
                                                        </div>
                                                        <div rel="tooltip" data-placement="top"
                                                             data-original-title="Redis服务器Key命中信息"
                                                             class="sparkline txt-color-greenLight display-inline key-info"
                                                             data-sparkline-type="pie"
                                                             data-sparkline-offset="90"
                                                             data-sparkline-piesize="90px">30,40
                                                        </div>
                                                    </div>

                                                </td>
                                            </tr>

                                        </table>
                                    </div>
                                    <div class="panel-footer text-align-right">
                                        <a id="redisRefresh" href="javascript:void(0);" class="btn btn-success"><i
                                                class="fa fa-refresh"></i>
                                            刷新</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget jarviswidget-color-blueLight" data-widget-fullscreenbutton="true">
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-line-chart"></i> </span>
                                    <h2>Redis 统计信息</h2>
                                    <div class="widget-toolbar no-padding">

                                        <select name="type" id="collType" rel="tooltip" data-placement="top"
                                                data-original-title="统计的级别">
                                            <option value="1">CPU</option>
                                            <option value="2">内存</option>
                                            <option value="3">内存比率</option>
                                            <option value="4">命令数</option>
                                            <option value="5">连接数</option>
                                            <option value="6">流量</option>
                                        </select>

                                    </div>
                                </header>

                                <!-- widget div-->
                                <div>
                                    <!-- widget content -->
                                    <div class="widget-body">
                                        <!-- widget body text-->
                                        <div id="redisChart" style="height: 300px;">
                                        </div>
                                        <!-- end widget body text-->
                                    </div>
                                    <!-- end widget content -->

                                </div>
                                <!-- end widget div -->

                            </div>
                            <!-- end widget -->
                        </div>
                    </div>

                </div>
            </div>

        </article>
        <!-- WIDGET END -->
    </div>
    <!-- end row -->
</section>
<!-- end widget grid -->

<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {

        /**
         * 刷新
         */
        function refresh() {
            // 获取redis当前信息
            $.ajax({
                url: '${ctx}/monitors/redis/current',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data) {
                        var status = data.status;
                        if (status) {
                            $('#redisPng').attr('src', "${ctx}/static/img/status-ok.png");
                        } else {
                            $('#redisPng').attr('src', "${ctx}/static/img/status-error.png");
                        }
                        $('#redisHost').html(data.host);
                        $('#redisPort').html(data.port);
                        $('#redisVersion').html(data.version);
                        $('#redisOs').html(data.os);
                        $('#redisArch').html(data.arch);
                        $('#redisConfigFile').html(data.configFile);
                        $('#redisStatus').html(status ? '正常' : '异常');
                        $('#redisUptime').html(data.process);
                        $('#redisClusterEnabled').html(data.custerEnabled ? '开启' : '未开启');
                        $('#redisLink').find('.net-info').html(data.totalNetOutputBytes + "," + data.totalNetInputBytes);
                        $('#redisLink').find('.key-info').html(data.keyspaceHits + "," + data.keyspacemisses);
                        runAllCharts();
                    }
                }
            });
        }

        refresh();

        // 刷新
        $('#redisRefresh').on('click', function () {
            refresh();
        });
        // 重启
        $('#redisRestart').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/redis/restart',
                callback: function () {
                    refresh();
                }
            });
        });

        // 初始化图表选择
        var $type = $('#collType');
        $type.select2({
            width: 200
        });
        // action
        $type.on('change', function () {
            var params = {
                type: 1,
                formatType: 'package',
                title: 'Redis服务器CPU使用趋势图',
                legends: ['服务器耗费的系统 CPU', '服务器耗费的用户 CPU']
            };

            var type = $type.val();
            if (type == 2) {
                params = {
                    type: 2,
                    formatType: 'flow',
                    title: 'Redis服务器内存趋势图',
                    legends: ['服务器内存数', '操作系统配置内存数', '内存峰值数']
                };
            } else if (type == 3) {
                params = {
                    type: 3,
                    formatType: 'package',
                    title: 'Redis服务器内存比率趋势图',
                    legends: ['内存比率']
                };
            } else if (type == 4) {
                params = {
                    type: 4,
                    formatType: 'package',
                    title: 'Redis服务器命令数趋势图',
                    legends: ['每秒钟执行的命令数量']
                };
            } else if (type == 5) {
                params = {
                    type: 5,
                    formatType: 'package',
                    title: 'Redis服务器连接数趋势图',
                    legends: ['客户端连接数']
                };
            } else if (type == 6) {
                params = {
                    type: 6,
                    formatType: 'flow',
                    title: 'Redis服务器流量趋势图',
                    legends: ['输入字节数', '输出字节数']
                };
            }

            initChart(params);
        });

        <!-- chart libraries start -->
        loadScript("/static/js/plugin/echarts/echarts.min.js", function () {
            loadScript("/static/js/plugin/echarts/macarons.js", function () {
                loadScript("/static/js/extend/chartData.js", function () {
                    initChart();
                });
            });
        });
        // 初始化chart
        var redisChart = null;

        function initChart(params) {

            // 先销毁旧的
            if (redisChart && redisChart.getChart() && redisChart.getChart().dispose) {
                redisChart.getChart().dispose();
            }
            if (params == null || params == undefined) {
                params = {
                    type: 1,
                    formatType: 'package',
                    title: 'Redis服务器CPU使用趋势图',
                    legends: ['服务器耗费的系统 CPU', '服务器耗费的用户 CPU']
                };
            }
            // init
            redisChart = new ChartData({
                // dom节点
                databind: $('#redisChart').get(0),
                type: 'line',
                dataurl: '${ctx}/monitors/redis/chartData',
                params: {type: params.type},
                title: params.title,
                legends: params.legends,
                formatType: params.formatType,
                config: {
                    dataZoom: [{
                        end: 10
                    }, {
                        end: 10,
                        show: true
                    }]
                }
            });
        }

    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
        // 销毁
    };
    // end destroy

    // load related plugins
    pagefunction();

</script>